<template>
  <basic-dialog
    title="关联资质"
    width="75%"
    :visible="dialogVisible"
    :showFooter="false"
    :handleClose="handleCloseDialog"
  >
    <BasicTableForm
      isInline
      ref="tableForm"
      actionPosition="start"
      :isScalingBtn="false"
      :dataSource="formData"
      :formColumns="formItemList"
      :handleSearchForm="formQueryFn"
      @getFormData="getFormDataFn"
    />
    <basic-table
      showActionCol
      showPagination
      showSelectCol
      :tableHeight="400"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :pageSizes="pageSizes"
      :actionRender="renderActionBtnFn"
      :selectionChange="handleSelectionChange"
      :checkSelectable="checkSelectableFn"
      @pageChange="handlePageChange"
      @pageSizeChange="handlePageSizeChange"
    >
      <el-row
        type="flex"
        justify="end"
        slot="content_context"
      >
        <ListPopover
          class="list-popover"
          content="查看SKU编码"
          :dataList="skuNos"
        />
        <el-button
          type="text"
          size="large"
          icon="el-icon-connection"
          :disabled="selectionList.length === 0"
          @click="handleBatchAssociateQualification"
        >批量关联</el-button
        >
      </el-row>
    </basic-table>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import BasicTableForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import ListPopover from '@/components/ShowContent/ListPopover';
import { tableColumns, formItemList } from '../constants/batchSetDialog';
export default {
  props: {
    /* 关联弹框显隐开关 */
    visible: {
      type: Boolean,
      default: false
    },
    /* 关联弹框维度key值, 默认uuid */
    dimensionKey: {
      type: String,
      default: 'uuid'
    },
    /* 关联方法 */
    handleAssociate: {
      type: Function,
      default: () => {}
    },
    /* 批量关联方法 */
    handleBatchAssociate: {
      type: Function,
      default: () => {}
    },
    /* 查询方法 */
    handleQuery: {
      type: Function,
      default: () => {}
    },
    /* 开关按钮名称 */
    actionBtnName: {
      type: String
    },
    skuNos: {
      type: Array,
      default: () => []
    },
  },
  components: {
    BasicDialog,
    BasicTableForm,
    BasicTable,
    ListPopover
  },
  data () {
    return {
      dialogVisible: false,
      formData: {
        qualificationName: '',
        supplierName: ''
      },
      formItemList: formItemList,
      tabs: {
        current: 'firstTab', // 当前tabs页签
        nameList: ['firstTab', 'secondTab'] // tabs页签key集合
      },
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10,
      },
      pageSizes: [10, 20, 30, 40],
      tableInfo: {
        columns: tableColumns,
        list: []
      },
      selectionList: []
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
      if (!val) {
        return false;
      }
      /* nextTick解决进入弹框请求接口loading异常问题 */
      this.$nextTick(() => {
        this.$refs.tableForm.handleQueryForm(this.actionBtnName);
      });
    },
  },
  methods: {
    /* 操作栏按钮渲染方法 */
    renderActionBtnFn (h, { row, index }) {
      const btnLabel = '关联';
      const calledFn = this.handleAssociateQualification;
      return (<div class="table-action">
        {<el-button
          size="mini"
          type="text"
          disabled={row.isCommonBinding}
          onClick={() => calledFn(row, index)}
        >{ btnLabel }
        </el-button>}
      </div>);
    },
    /* 获取表单数据方法 */
    getFormDataFn (formData) {
      this.formData = formData;
    },
    /* 加载表格数据事件 */
    handleGetTableData () {
      const params = {
        pagination: {
          nowPage: this.pagination.nowPage,
          pageShow: this.pagination.pageShow,
        },
        sort: {
          sortName: '',
          sortType: ''
        }
      }
      let loading = this.$loading({ target: '.el-dialog__body' });
      this.handleQuery({
        params,
        formData: this.formData,
        tabsStatus: this.tabs.current
      }).then(retData => {
        loading.close();
        if (!retData) { return false }
        this.tableInfo.list = retData.results;
        this.pagination.totalNum = retData.totalNum;
      });
    },
    /* 表单清空方法 */
    formResetFn () {
      this.$refs.tableForm.handleResetForm();
    },
    /* 表单查询方法 */
    formQueryFn () {
      this.pagination.nowPage = 1; // 每次切换tabs，都重置当前页为第一页
      this.handleGetTableData();
    },
    /* 切换tabs事件 */
    handleSwitchTabs () {
      this.formQueryFn();
    },
    /* 关联事件 */
    handleAssociateQualification (row, index) {
      this.optionsCommonFn(row, this.handleAssociate, '关联成功');
    },
    /* 批量关联事件 */
    handleBatchAssociateQualification () {
      this.optionsCommonFn(this.selectionList, this.handleBatchAssociate, '批量关联成功');
    },
    /* 单个操作方法 */
    optionsCommonFn (source, calledFn, message) {
      let loading = this.$loading({ target: '.el-dialog__body' });
      calledFn(source).then(res => {
        loading.close();
        if (!res) {
          return false;
        }
        this.$message.success(message);
        /* 当当前页仅剩一条数据，且不为第一页时，页码减一 */
        if (this.tableInfo.list.length === 1 && this.pagination.nowPage > 1) {
          this.pagination.nowPage -= 1;
        }
        this.handleGetTableData(); // 重新加载表格数据
      });
    },
    /* 表格数据勾选或勾选取消方法 */
    handleSelectionChange (list) {
      this.selectionList = list;
    },
    /* 改变页码事件 */
    handlePageChange (currentPage) {
      this.pagination.nowPage = currentPage;
      this.handleGetTableData(); // 重新加载表格数据
    },
    /* 改变当前页条数大小事件 */
    handlePageSizeChange (pageSize) {
      this.pagination.pageShow = pageSize;
      if (this.tableInfo.list.length === 0) {
        return false;
      }
      this.handleGetTableData(); // 重新加载表格数据
    },
    handleCloseDialog () {
      this.clearDialogStatusFn();
      this.$emit('update:visible', false);
    },
    clearDialogStatusFn () {
      this.tableInfo.list = [];
      this.pagination = {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10
      }
      this.formResetFn();
    },
    /* 表格勾选是否禁用判断方法 */
    checkSelectableFn ({ row }) {
      /**
       * @isCommonBinding
       * true，checkbox置灰
       * false，checkbox可选
      */
      return !row.isCommonBinding; // 返回值为true，勾选不可禁用，返回值为false，勾选禁用
    },
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-dialog__body {
  padding: 10px 20px;
}

.list-popover {
  margin-right: 10px;
}
</style>
